<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="肠菌样本" name="first">
          <el-table v-loading="loading" :data="dataList" highlight-current-row border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="55" prop="dataIndex"/>
            <el-table-column label="样本编号" prop="number"/>
            <el-table-column label="用户" prop="userName"/>
            <el-table-column label="状态" prop="sampleStatus"/>
            <el-table-column fixed="right" label="操作"  min-width="120" width="120">
              <template #default="scope">
                <el-button type="warning" size="small" link @click="sampleDetection(scope.row)"><i class="el-icon-edit"></i> 检 测</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParams.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="科研样本" name="second">
          <el-table v-loading="loading" :data="dataList" highlight-current-row border @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center" />
            <el-table-column label="序号" width="55" prop="dataIndex"/>
            <el-table-column label="样本名称" prop="name"/>
            <el-table-column label="分组" prop="group"/>
            <el-table-column label="测序方式" prop="layoutText"/>
            <el-table-column label="实验策略" prop="strategy"/>
            <el-table-column fixed="right" label="操作"  min-width="120" width="120">
              <template #default="scope">
                <el-button type="warning" size="small" link @click="sampleDetection(scope.row)"><i class="el-icon-edit"></i> 检 测</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="queryParams.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="10"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="FMT 样本" name="third">
          暂未实现
        </el-tab-pane>
      </el-tabs>
    </el-card>
    
  </div>
</template>

<script>
import seqSampleApi from '@/api/sequence/seqSample'

export default {
	name: 'seqDataIndex',
	data() {
		return {
      activeName: 'first',
      total: 0,
      loading: false,
      dataList: [],
      ids: [],
      queryParams: {
        pageNum: 0,
        pageSize: 10,
        criteriaVos: [],
      },
      searchFormData: [],
		};
	},
  methods: {
    sampleDetection (row) {
      seqSampleApi.setDetection(row.id, true).then(res => {
        this.$message({message: '已添加值检测样本列表！', type: 'success'});
        this.init();
      })
    },
    init () {
      this.loading = true;
      this.searchFormData = [];
      let searchFormData = this.searchFormData;
      let sampleType = '';
      switch (this.activeName) {
        case 'first':
          sampleType = 'REPORT'
          searchFormData.push({
            name: 'sampleStatus',
            searchType: 'EQUAL',
            searchVal: 'SAMPLE_RECEIVE'
          });
          break;
        case 'second':
          sampleType = 'SCIENTIFIC_RESEARCH'
          break;
        case 'third':
          sampleType = 'FMT'
          break;
      }
      searchFormData.push({
        name: 'sampleType',
        searchType: 'EQUAL',
        searchVal: sampleType
      });
      searchFormData.push({
        name: 'detection',
        searchType: 'EQUAL',
        searchVal: '0'
      });
      
      let params = {
        number: this.queryParams.pageNum,
        size: this.queryParams.pageSize,
        criteriaVos: searchFormData,
      };
      seqSampleApi.page(params).then((res) => {
        let data = res.data;
        let index = 1
        data.content.forEach((v) => {
          v.dataIndex = index++;
          v.layoutText = v.layout ? (v.layout === 'PAIRED' ? '双端测序' : '单端测序') : '-';
        });
        this.dataList = data.content;
        this.total = data.count;
        this.loading = false;
      }).catch(() => {});
    },
    handleClick (tab, event) {
      this.activeName = tab.name;
      this.init();
    },
    handleSelectionChange () {
      this.ids = [];
      val.forEach(v => {
        this.ids.push(v.id);
      });
    },
    handleSizeChange (val) {
      this.queryParams.pageSize = val;
      this.init();
    },
    handleCurrentChange (val) {
      this.queryParams.pageNum = val;
      this.init();
    },
  },
  created() {
    this.init();
  }
};
</script>
<style scoped>
.app-container {
  margin: 10px;
}
</style>